<template>
  <div>
    <div @click="showMoreMask = true" class="cart-icon c-brp50 c-pf c-p-c-216 c-ww72 c-hh72 c-flex-row c-justify-center c-aligni-center c-pz100 c-box-shadow2 c-p-b220">
      <div class="c-ww70 c-hh70 c-flex-row c-justify-center c-aligni-center c-p">
        <div class="iconfont c-fs34 c-fc-xblack">&#xe989;</div>
      </div>
    </div>
    <open-modal class="c-pz10000" :openModal='showMoreMask' @closeModal='showMoreMask = false'>
      <div class="c-bg-f5 c-pt48 c-br-tr40 c-br-tl40">
        <div class="c-flex-row c-flexw-wrap c-ph20 c-bd-b1-ccc">
          <div @click="goHomePage" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs40">&#xe64c;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">店铺首页</div>
          </div>
          <div @click="goMemberIndex" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs40">&#xe628;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">我的</div>
          </div>
          <div v-if="showInvite" @click="goInviteFriends" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs48">&#xe7b2;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">邀请好友</div>
          </div>
          <div v-if="hasCollect" @click="cancleCollectPop" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs48">&#xe9b4;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">已收藏</div>
          </div>
          <div v-else @click="goCollect" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs48">&#xe9b5;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">收藏</div>
          </div>
          <div v-if="showPresentFriend" @click="goPresent" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs48">&#xe7b9;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">赠送</div>
          </div>
          <div v-if="isCustServiceOpen && $isWxAppIos()" @click="goWxAppContact()" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs40">&#xe686;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">联系客服</div>
          </div>
          <div @click="goVip" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs40">&#xe645;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">会员</div>
          </div>
          <div v-if="showFollowedMp" @click="goFollow" class="c-w20 c-flex-shrink0 c-flex-column c-aligni-center c-mb50">
            <div class="c-br20 c-ww84 c-hh84 c-bg-white c-flex-row c-flex-center">
              <span class="iconfont c-fc-sblack c-fs24 c-fs40">&#xe6da;</span>
            </div>
            <div class="c-fs20 c-fc-sblack c-mt8">关注</div>
          </div>
        </div>
        <div class="c-pv12 c-ph24">
          <div @click="showMoreMask = false" class="c-fs26 c-fc-xblack c-fw600 c-hh64 c-flex-row c-flex-center c-bd1-ccc c-br32">关闭</div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import OpenModal from "@/components/templates/common/openModal.vue";
import { utilJs } from "@/utils/common.js"
export default {
  name: 'CourseMoreBtn',
  components: {
    OpenModal
  },
  props: {
    showInvite: {
      type: Boolean,
      default: false,
    },
    showPresentFriend: {
      type: Boolean,
      default: false,
    },
    showFollowedMp: {
      type: Boolean,
      default: false,
    },
    hasCollect: {
      type: Boolean,
      default: false
    },
  },
  computed: {},
  data() {
    return {
      showMoreMask: false,
      isCustServiceOpen: localStorage.getItem("isCustServiceOpen") == 1 ? true : false,
    }
  },

  methods: {
    goWxAppContact() {
      utilJs.miniProgramGoTo('push', "/pages/member/contact/index")
    },
    goHomePage() {
      this.$routerGo(this, "push", {
        path: "/"
      });
    },
    goMemberIndex() {
      this.$routerGo(this, "push", {
        path: "/member/memberIndex"
      });
    },
    goInviteFriends() {
      this.$emit('spreadInvite')
    },
    goCollect() {
      this.$emit('goCollect')
    },
    cancleCollectPop() {
      this.$emit('cancleCollectPop')
    },
    goPresent() {
      this.$emit('clickBuyNow', true)
    },
    goVip() {
      this.$routerGo(this, "push", {
        path: "/member/vip/vipUpNew"
      });
    },
    goFollow() {
      this.$emit('goFollow', true)
    }
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>

<style scoped>
.cart-icon{
  background:rgba(255,255,255,0.92);
}
.c-p-b154 {
  bottom: 3.85rem;
}
</style>
